<template>
  <div class="board-people-list">
    <div ref="odiv"></div>

    <!-- <div ref="vido2" class="video-list-box1"></div> -->
    <!-- <video src :id="videoId" class="tset_video"></video> -->
    <div class="test_div">
      <button @click="start">开启视频会议</button>
      <!-- <button @click="getdom">会议人员</button> -->
    </div>
    <ul style="position: absolute; z-index: 9999; width: 100%;">
      <li class="people-list" v-for="(item, index) of PersonList" :key="index" style="margin-bottom: 196px">
        <div class="user_img_box">
          <img v-if="false" class="people-img" :src="item.userPic" alt />
        </div>
        <div class="center-info" style="background-color: rgba(0, 0, 0, .5);color:white">
          <div style="height: 15px;line-height: 15px;margin-bottom: 5px; text-align: left;">
            <span class="people-name">{{item.userName}}</span>
          </div>
        </div>
        <div class="people-btn" v-if="item.host == 1">
          <span class="follow-btn" @click="needHost">主持人</span>
        </div>
      </li>
    </ul>
    <div ref="vido" class="video-list-box"></div>

    <!-- <ul>
      <li v-for="(item,index) of PersonList" :key="index" class="people-list">
        <div class="user_img_box">
          <img class="people-img" :src="item.img" alt>
          <div class="meng-ban" v-show="item.status!=1"></div>
        </div>
        <div class="center-info">
          <div style="height: 15px;line-height: 15px;margin-bottom: 5px;">
            <span class="people-name">{{item.name}}</span>
            <span class="people-color" :style="{backgroundColor:item.member_color}"></span>
          </div>
          <div class="file-content">
            <span class="people-file">{{item.fileName}}</span>
            <span class="file-page" v-if="item.type!='following'">，{{item.page}}</span>
          </div>
        </div>
        <div v-if="item.member_account!=userAccount&&item.showFllow&&item.type!='following'" class="people-btn">
          <span
            :class="[item.id==nowShowUser? 'cancle-follow' : 'follow-btn']"
            @click="followPeople(item.id,item)"
          >{{item.id==nowShowUser?'取消跟随':'跟随'}}</span>
        </div>
      </li>
    </ul>-->
  </div>
</template>
<script>
import { debug } from 'util';
export default {
  props: ["peopleList", "hostFlag"],
  data() {
    return {
      src: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563254777671&di=9420464b181c7654f33aa7ea03c93980&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201504%2F18%2F20150418H4459_VmtX3.jpeg',
      userAccount: window.localStorage.getItem("account"),
      userImg: window.localStorage.getItem("userimg"),
      userName: window.localStorage.getItem("username"),
      PersonList: [],
      host: null,
      videoDomId: null,
      videoConference: null
    };
  },
  watch: {
    peopleList: {
      handler(newV, oldV) {
        this.PersonList = newV;
      },
      deep: true
    },
    hostFlag: {
      handler(newV, oldV) {

      },
      deep: true
    }
  },
  mounted() {
    var videoList = this.$refs.vido;
    var liveVideoList = this.$refs.odiv;
    // let videoList = document.getElementById('videoList')
    // let liveVideoList = document.getElementById('odiv')
    let cert = 'a3d2aef58ca4460c';
    let hostCert = 'xxxxxxxx';
    let isHost = true;
    let isMain = true;
    let isDebug = true;
    let userInfo = {
      "headImage": "https://wwwwwwwwwwwwwwwwww"
    };
    let userName = window.localStorage.getItem("username");
    this.videoConference = new VideoConference(videoList, liveVideoList, userName, 2, userInfo, 15,
      cert, hostCert, isMain, isHost, isDebug);
  },
  methods: {
    start() {

      this.videoConference.initialize();
      console.log(this.videoConference)

    },
    needHost() { // 申请主持人
      for (let i = 0; i < this.PersonList.length; i++) { // 查看当前人员是否为主持人
        if (this.userAccount == this.PersonList[i].userId) {
          this.host = this.PersonList[i].host;
        }
      }
      if (this.host == 1) { // 主持人自己申请，给予提示
        this.$message({
          message: '您已是主持人，请勿重复申请',
          type: 'warning'
        });
        return;
      }
      if (this.hostFlag) { // 因为不可同时申请，需判断当前无人申请
        this.$message({
          message: '参会人员正在申请，请稍后再试',
          type: 'warning'
        });
      } else {
        let obj = { // 申请主持人接口参数
          type: 'host',
          data: {
            userId: this.userAccount,
            userNmae: this.userName
          }
        };
        this.$parent.websocketsend(obj);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.board-people-list {
  position: relative;
  overflow-y: auto;
  letter-spacing: 1px;
  height: 100%;
  -webkit-user-select: none;
  /*谷歌 /Chrome*/
  -moz-user-select: none;
  /*火狐/Firefox*/
  -ms-user-select: none;
  /*IE 10+*/
  user-select: none;
  .people-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 5px 8px;
    .user_img_box {
      border-radius: 50%;
      width: 16%;
      text-align: center;
      position: relative;
      margin-right: 8px;
    }
    .people-img {
      height: 42px;
      width: 42px;
    }
    .center-info {
      width: 60%;
    }
    .people-name {
      font-size: 10px;
    }
    .follow-btn {
      cursor: pointer;
      color: #ee6133;
      border: 1px solid #ee6133;
      background-color: #fff;
      font-size: 10px;
      padding: 1px 5px;
    }
    // .cancle-follow {
    //   border: 1px solid $moregray;
    //   color: $moregray;
    //   font-size: 10px;
    //   padding: 1px 5px;
    //   cursor: pointer;
    // }
  }
  // .video-list-box {
  //   padding: 5px;
  //   float: left;
  //   width: 480px;
  //   overflow-y: scroll;
  //   height: 100%;
  //   overflow: auto;
  // }

  // /* 1列  */
  // .video-list-box {
  //   column-count: 1;
  // }

  // /* 2列  */
  // @media (min-width: 1200px) {
  //   .video-list-box {
  //     -moz-column-count: 2;
  //     /* Firefox */
  //     -webkit-column-count: 2;
  //     /* Safari 和 Chrome */
  //     column-count: 2;
  //   }
  // }

  // /* 3列  */
  // @media (min-width: 2000px) {
  //   .video-list-box {
  //     -moz-column-count: 3;
  //     /* Firefox */
  //     -webkit-column-count: 3;
  //     /* Safari 和 Chrome */
  //     column-count: 3;
  //   }
  // }

  // /* 单一视频容器的样式 */
  // .video-container {
  //   break-inside: avoid;
  //   box-sizing: border-box;
  //   border: 1px solid #eee;
  //   position: relative;
  //   margin-bottom: 5px;
  // }

  // /*========================瀑布流  End================*/

  // /* 视频video标签的样式 */
  // .video-style {
  //   width: 100%;
  //   -webkit-column-break-inside: avoid;
  // }

  // /* 在视频上显示用户名时的样式 */
  // .video-user-name {
  //   top: 0px;
  //   background: #000;
  //   opacity: 0.3;
  //   position: absolute;
  //   height: 30px;
  //   line-height: 30px;
  //   text-align: center;
  //   width: 100%;
  //   color: #fff;
  // }
}
</style>